<template>
    <div class="content">
        <el-card v-show="isShow" class="card-1" shadow="never">
            <el-form ref="form" :model="form" label-width="100px" :inline="true" :rules="rules">
                <el-form-item label="用户名称:" prop="name">
                    <el-input v-model="username" placeholder="请输入用户名称" style="width: 200px" clearable size="small"></el-input>
                </el-form-item>
                <el-form-item label="权限密码:" prop="roleKey">
                    <el-input v-model="password" placeholder="请输入权限密码" style="width: 200px" clearable size="small"></el-input>
                </el-form-item>
                <el-form-item label="权限状态:" prop="status">
                    <el-select v-model="form.status" placeholder=" 请选择权限状态" style="width: 200px" clearable size="small">
                        <el-option label="使用中" :value="1"></el-option>
                        <el-option label="已停用" :value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item style="margin-left: 20px;">
                    <el-button icon="el-icon-search" type="primary" size="small" plain @click="search()">查询</el-button>
                    <el-button icon="el-icon-refresh-right" size="small" plain @click="reset()">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card shadow="never">
            <template #header>
                <el-row :gutter="10">
                    <el-col :span="1.5">
                        <el-button type="primary" plain icon="el-icon-plus"  @click="handleAdd" size="small" disabled="true">新增</el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button type="success" plain icon="el-icon-edit-outline" @click="handleEdit" size="small" disabled="true">编辑</el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button type="danger" plain icon="el-icon-document-delete" @click="handleDel" size="small" disabled="true">删除</el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button type="warning" plain icon="el-icon-printer" @click="handleExport" size="small" disabled="true">导出</el-button>
                    </el-col>
                </el-row>
            </template>
            <el-table ref="table" :data="pageData">
                <el-table-column type="selection" style="width: 100px;" align="center"></el-table-column>
                <el-table-column prop="id" style="width: 200px;" label="序号" align="center"></el-table-column>
                <el-table-column label="用户名称" prop="username" show-overflow-tooltip align="center"></el-table-column>
                <el-table-column label="权限密码" prop="password" show-overflow-tooltip align="center"></el-table-column>
                <el-table-column label="邮箱地址" prop="email" show-overflow-tooltip align="center"></el-table-column>
                <el-table-column label="权限状态" align="center" prop="status" style="width: 100px;" disabled="true">
                    <tempalte slot-scope="scope">
                        <el-switch v-model="scope.row.status"></el-switch>
                    </tempalte>
                </el-table-column>
                <el-table-column label="操作" style="width: 200px;" align="center">
                    <template slot-scope="scope">
                        <el-button type="success" size="small" @click="showDetail(scope.row)" plain disabled="true">编辑</el-button>
                        <el-button type="danger" size="small" plain>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-row style="margin-top: 20px;">
                <el-col style="text-align: center">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentpage"
                        :page-sizes="[5, 10, 50, 100]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                    </el-pagination>
                </el-col>
            </el-row>
        </el-card>

        <el-dialog title="权限管理" :visible.sync="dialogFormVisible" width="30%">
            <el-form ref="detailData" :data="detailData" :rules="rules">
                <el-form-item label="用户名称:" prop="username">
                    <el-input v-model="detailData.name" placeholder="请输入用户名称" style="width: 250px" clearable></el-input>
                </el-form-item>
                <el-form-item label="权限密码:" prop="password">
                    <el-input v-model="detailData.password" placeholder="请输入权限密码" style="width: 250px" clearable></el-input>
                </el-form-item>
                <el-form-item label="创建时间:" prop="createDate">
                    <el-input v-model="detailData.createDate" placeholder="请输入创建时间" style="width: 250px" clearable></el-input>
                </el-form-item>
                <el-form-item label="权限状态" prop="status">
                    <el-select>
                        <el-option label="使用中" value=1></el-option>
                        <el-option label="已停用" value=0></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item align="center">
                    <el-button type="primary" @click="dialogFormVisible = false" size="small">确 定</el-button>
                    <el-button @click="dialogFormVisible = false" size="small">取 消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>


<script>
import {
    getAllUsers,
    searchUsers
} from "@/api/login.js";

export default {
    data() {
        return {
            detailData: {},
            dialogFormVisible: false,
            form: {
                name: '',
                roleKey: '',
                status: '',
            },
            isShow: true,
            username: '',
            password: '',
            // 分页数据
            total: 0, // 数据总条数
            currentpage: 1, // 当前页码
            pageSize: 5, // 每页显示条数
            pageData: [], // 当前页显示的数据
            roleData: [], // 完整数据
            rules: {
                name: [
                    {
                        required: true,
                        message: '请输入用户名称',
                        trigger: 'blur'
                    }
                ],
                roleKey: [
                    {
                        required: true,
                        message: '请输入权限字符',
                        trigger: 'blur'
                    }
                ],
                status: [
                    {
                        required: true,
                        message: '请选择权限状态',
                        trigger: 'blur'
                    }
                ],
                createDate: [
                    {
                        required: true,
                        message: '请选择创建时间',
                        trigger: 'blur'
                    }
                ],
                password: [
                    {
                        required: true,
                        message: '请选择权限密码',
                        trigger: 'blur'
                    }
                ]
            },
        };
    },
    mounted() {
        this.getData(); // 初始化获取数据
    },
    methods: {
        handleAdd() {
            alert("新增功能...");
        },
        handleDel() {
            alert("删除功能");
        },
        handleEdit() {
            alert("编辑功能...");
        },
        handleExport() {
            alert("导出功能...");
        },
        showDetail(row) {
            this.detailData = row;
            this.dialogFormVisible = true;
        },
        // 获取所有数据
        getData() {
            getAllUsers().then((res) => {
                console.log(res)
                if (res.data.code === 200) {
                    console.log("获取数据成功", res.data)
                    this.roleData = res.data.data;
                    this.total = this.roleData.length; // 设置总条数
                    this.getPageData(); // 更新当前页数据
                } else {
                    this.$message.error(res.data.message);
                }
            });
        },
        // 搜索功能
        search() {
            searchUsers({ username: this.username, password: this.password }).then((res) => {
                if (res.data.code === 200) {
                    this.roleData = res.data.data;
                    this.total = this.roleData.length; // 设置总条数
                    this.getPageData(); // 更新当前页数据
                } else {
                    this.$message.error(res.data.message);
                }
            });
        },
        // 获取当前页数据
        getPageData() {
            const startIndex = (this.currentpage - 1) * this.pageSize;
            const endIndex = startIndex + this.pageSize;
            this.pageData = this.roleData.slice(startIndex, endIndex); // 截取当前页数据
        },
        // 分页事件处理
        handleSizeChange(size) {
            this.pageSize = size; // 更新每页显示条数
            this.getPageData(); // 更新分页数据
        },
        handleCurrentChange(page) {
            this.currentpage = page; // 更新当前页码
            this.getPageData(); // 更新分页数据
        },
        reset() {
            this.username = '';
            this.password = '';
        }
    }
};
</script>



<style>
.el-card, .el-form{
    margin-top: 20px;
}

</style>